<template>
	<view class="exchange-page">
		<view class="top-nav" id="top-nav">
			<image src="/static/exhcange-top-bg.png" mode="aspectFill" class="top-nav-bg"></image>
			<view class="top-title" :style="{top:titleTop}">心愿好物</view>
			<view class="wish-value-box">
				<view class="view-value">
					我的心愿值
					<text class="iconfont icon-heart"></text>
					<text v-if="hasBind">{{coinNum}}</text>
					<view class="top-login-btn" @click="onLoginClick" v-else>登录后查看</view>
				</view>
				<view class="get-wish-btn" @click="onGetCoinClick">获取心愿值</view>
			</view>
		</view>
		<view class="scroll-wrap">
			<!-- <view  class="swipe-wrap"> -->
			<MescrollUni :top="0" :down="downOption" @down="downCallback"  @init="mescrollInit" :up="upOption" @up="upCallback" class="product-list">
				<view v-for="(item,index) in dataList" :key="index" class="product-item" @click="goDetail(item)">
					<image :src="item.goods_img_url" :webp="true" mode="aspectFill" class="product-img"></image>
					<view class="product-info">
						<view class="product-title-box">
							<view class="product-title text-ellipsis-1">{{item.goods_name}}</view>
							<view class="product-desc text-ellipsis-1">{{item.goods_title}}</view>
							<view class="product-version" v-if="item.versionList.length>0">
								<text v-for="(version,index) in item.versionList" :key="index">{{version}}</text>
							</view>
						</view>
						<view class="product-price">
							<text class="product-price-value"><text class="iconfont icon-heart"></text>{{item.need_wish_coin}}</text>
							<text class="other-price" v-if="item.show_platform_price!==0">{{item.platform_name}}¥{{item.platform_price}}</text>
						</view>
						<view class="product-tags" v-if="item.tagList.length>0">
							<text class="product-tag" :class="{'free-tag':item.can_free&&index===0}" v-for="(tag,index) in item.tagList" :key="index">{{tag}}</text>
						</view>
					</view>
				</view>
				<view class="exhchange-no-more" slot="nodata">
					<text class="exhchange-no-more-line"></text>
					<view class="exhchange-no-more-mid">
						<image src="/static/exchange-bottom-bg.png" mode="aspectFill" class="exhchange-no-more-bg"></image>
						<text class="exhchange-no-more-text">联系客服推荐好物吧</text>
					</view>
					<text class="exhchange-no-more-line"></text>
				</view>
			</MescrollUni>
			<!-- </view> -->
		</view>
		<!--获取心愿值弹窗-->
		<multi-support-popup ref="multi" hideBar @success="onMultiSuccess"></multi-support-popup>
		<login-popup :isTopOffset="false" :visible.sync="showLogin" @success="onLoginSuccess"/>
		<new-guy-popup></new-guy-popup>
		<!--支持成功弹窗-->
		<support-success :visible.sync="showSuccess" :getNum="getNum" :isTopOffset="false" :showMore="false"/>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import MultiSupportPopup from '@/components/popups/multi-support-popup.vue'
	import SupportSuccess from '@/components/support-success-popup.vue'
	import NewGuyPopup from '@/components/popups/new-guy-popup.vue'
	import LoginPopup from '@/components/login-popup.vue'
	// #ifdef MP-WEIXIN
	import ShareMixin from '@/mixins/share-mixin.js'
	// #endif
	export default {
		// #ifdef MP-WEIXIN
		mixins: [ShareMixin],
		// #endif
		name: 'exchange-page',
		components: {
			MescrollUni,
			LoginPopup,
			MultiSupportPopup,
			NewGuyPopup,
			SupportSuccess
		},
		data() {
			return {
				topShareInfo:{
					share_title:'这个心愿圈有点有趣，邀请你也来看看！',
					path:'/pages/exchange/exchange',
					share_img:'https://cdn.zhixianggo.com/config/f26ecd782a8e082eda2d5f311950dc2e.png'
				},
				downOption: {
					autoShowLoading:true,
					auto:true,
					use: true
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto:false,
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 15 // 每页数据的数量,默认10
					},
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				scrollTop:'243rpx',
				dataList:[],
				mescroll:null,
				showLogin:false,
				getNum:0,
				showSuccess:false,
				titleTop:0
			}
		},
		computed:{
			...mapGetters([
				'hasBind',
				'coinNum'
			])
		},
		onShow() {
			this.$store.dispatch('getUserInfo',{loading:false})
		},
		onLoad(){
			 let data=uni.getSystemInfoSync()
			 this.titleTop=data.statusBarHeight+9+'px'
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			downCallback(mescroll) {
				setTimeout(()=>{
					mescroll.resetUpScroll()
				},300)
			},
			upCallback(mescroll) {
				let page = mescroll.num // 页码, 默认从1开始
				let pageSize = mescroll.size // 页长, 默认每页15条
				this.$api.exchangeList({page,page_size:pageSize},{loading:false}).then(
					res=>{
						res.goods_list.data.forEach(item=>{
							if(item.goods_label){
								item.tagList=item.goods_label.split(',')
							}
							if(item.goods_specification){
								item.versionList=item.goods_specification.split(',')
							}
						})
						if(mescroll.num == 1) {
							this.dataList=res.goods_list.data
						} else{
							this.dataList = this.dataList.concat(res.goods_list.data)
						}
						mescroll.endBySize(res.goods_list.data.length,res.goods_list.total)
					},
					()=>{
						mescroll.endErr()
					}
				)
			},
			onGetCoinClick(){
				if(!this.hasBind){
					this.showLogin=true
					this.isLoginFromGet=true
				}else{
					this.$refs.multi.open({
						id:'',
						shortNum:0,
						scene:'exchange'
					})
				}
				
			},
			onLoginClick(){
				this.showLogin=true
				this.isLoginFromGet=false
			},
			onLoginSuccess(){
				if(this.isLoginFromGet){
					this.onGetCoinClick()
				}
			},
			onMultiSuccess(num){
				console.log(num)
				this.getNum=num
				this.showSuccess=true
			},
			goDetail(item){
				uni.navigateTo({
					url:`/pages/product/product-detail?goods_id=${item.goods_id}`
				})
			},
			getElementData(el, callback){
				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
					callback(data[0]);
				});
			},
		}
	}
</script>

<style lang="scss">
	.exchange-page {
		display: flex;
		height: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.top-nav {
		position: relative;
		width: 100%;
		height: 243rpx;
		background:rgba(231, 64, 74, 1);
		color: #fff;
		box-sizing: content-box;
	}
	.top-nav-bg{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	.top-title {
		position: absolute;
		left: 0;
		// top:calc(var(--status-bar-height) + 2px) ;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		z-index: 2;
	}
	.top-login-btn{
		// font-size: 32rem;
		// color:#C0C0C0;
	}
	.wish-value-box {
		position: absolute;
		left: 0;
		bottom: 26rpx;
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		padding: 0 36rpx;
		z-index: 2;
	}

	.view-value {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		.iconfont{
			font-size: 34rpx;
			margin:0 5rpx 0 10rpx;
			color:#fff;
		}
	}

	.get-wish-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 154rpx;
		height: 54rpx;
		font-size: 24rpx;
		border-radius: 27px;
		border: 1px solid rgba(255, 255, 255, .5);
	}

	.scroll-wrap {
		position: relative;
		flex: 1;
		width: 100%;
		transform: translateZ(0px);
	}
	.product-list {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
		left: 0;
	}

	.product-item {
		display: flex;
		align-items: center;
		height: 260rpx;
		padding: 40rpx 36rpx 0;
	}

	.product-img {
		height: 100%;
		width: 220rpx;
		margin-right: 20rpx;
		border-radius: 4rpx;
	}

	.product-info {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 100%;
		overflow: hidden;
	}

	.product-title-box {
		flex:1;
		overflow: hidden;
	}

	.product-title {
		font-size: 30rpx;
		margin-bottom: 4rpx;
	}
	.product-desc{
		margin-bottom: 10rpx;
		font-size: 22rpx;
		color: #999;
	}
	.product-version{
		display: flex;
		align-items: center;
		&>text{
			padding: 0 6rpx;
			height:30rpx;
			margin-right: 10rpx;
			font-size:18rpx;
			font-weight:400;
			color:rgba(153,153,153,1);
			line-height:30rpx;
			background:rgba(246,246,246,1);
			border-radius:4rpx;
		}
	}
	.product-tags {
		display: flex;
		align-items: center;
		margin-top: 8rpx;
	}

	.product-tag {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 6rpx;
		height: 30rpx;
		font-size: 20rpx;
		color: #E7404A;
		border-radius: 4rpx;
		border: 1rpx solid rgba(231, 64, 74, 1);
		&:not(:last-child){
			margin-right: 10rpx;
		}
		&.free-tag{
			background-color: #E7404A;
			color:#fff;
		}
	}

	.product-price {
		display: flex;
		align-items: center;
	}

	.product-price-value {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #E7404A;
		.iconfont{
			font-size: 32rpx;
			margin-right: 5rpx;
		}
	}

	.other-price {
		font-size: 24rpx;
		color: #999;
	}
	.exhchange-no-more{
		display: flex;
		align-items: center;
		padding: 0 46rpx;
	}
	.exhchange-no-more-line{
		flex:1;
		height: 1rpx;
		background-color: #D8D8D8;
	}
	.exhchange-no-more-mid{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
	}
	.exhchange-no-more-bg{
		width: 187rpx;
		height: 42rpx;
		margin-bottom: 14rpx;
	}
	.exhchange-no-more-text{
		font-size: 24rpx;
		color:#999;
	}
</style>
